<template>
  <div class="common-table-component">
    <a-table
      row-type="FileData"
      :loading="loading"
      :columns="columns"
      :data-source="data"
      :pagination="false"
      :row-key="record => record.id"
      :row-selection="{ selectedRowKeys, onChange: onSelectChange }"
      @change="handleTableChange"
      :scroll="{ x: 'max-content' }"
    >
      <template #bodyCell="{ column, record }">
        <!-- 文件名称/缩略图 -->
        <template v-if="column.key === 'fileName'">
          <div class="file-name-cell">
            <div class="file-icon">
              <img
                v-if="isImageFile(record as FileData)"
                :src="(record as FileData).url"
                :alt="(record as FileData).name"
                class="file-thumbnail"
              />
              <FileImageOutlined v-else-if="isDocumentFile(record as FileData)" class="doc-icon" />
              <VideoCameraOutlined v-else-if="isVideoFile(record as FileData)" class="video-icon" />
              <SoundOutlined v-else-if="isAudioFile(record as FileData)" class="audio-icon" />
              <FileOutlined v-else class="other-icon" />
            </div>
            <div class="file-info">
              <div class="file-title" :title="(record as FileData).originalName">{{ (record as FileData).originalName }}</div>
              <div class="file-meta">
                {{ (record as FileData).extension?.toUpperCase() || '' }} / 
                {{ formatFileSize((record as FileData).size || 0) }}
              </div>
            </div>
          </div>
        </template>

        <!-- 上传人 -->
        <template v-else-if="column.key === 'uploaderName'">
          <span>{{ (record as FileData).uploadBy || '系统' }}</span>
        </template>

        <!-- 文件类型 -->
        <template v-else-if="column.key === 'fileType'">
          <span v-if="isImageFile(record as FileData)">
            <span>{{ t('file.image') }}</span>
          </span>
          <span v-else-if="isDocumentFile(record as FileData)">
            <span>{{ t('file.document') }}</span>
          </span>
          <span v-else-if="isVideoFile(record as FileData)">
            <span>{{ t('file.video') }}</span>
          </span>
          <span v-else-if="isAudioFile(record as FileData)">
            <span>{{ t('file.audio') }}</span>
          </span>
          <span v-else>
            <span>{{ t('file.other') }}</span>
          </span>
        </template>

        <!-- 上传时间 -->
        <template v-else-if="column.key === 'createTime'">
          <span>{{ formatDate((record as FileData).uploadTime) }}</span>
        </template>

        <!-- 操作 -->
        <template v-else-if="column.key === 'action'">
          <div class="action-column">
            <a-button type="link" size="small" v-if="isPreviewable(record as FileData)" @click="$emit('preview', record as FileData)">
              <template #icon><EyeOutlined /></template>
              {{ t('file.preview') }}
            </a-button>
            <a-button type="link" size="small" @click="$emit('download', record as FileData)">
              <template #icon><DownloadOutlined /></template>
              {{ t('file.download') }}
            </a-button>
            <a-button type="link" size="small" @click="$emit('copy-link', record as FileData)">
              <template #icon><LinkOutlined /></template>
              {{ t('file.copyLink') }}
            </a-button>
            <a-button type="link" size="small" danger @click="$emit('delete', record as FileData)">
              <template #icon><DeleteOutlined /></template>
              {{ t('common.delete') }}
            </a-button>
          </div>
        </template>
      </template>
    </a-table>

    <!-- 自定义分页组件 -->
    <Pagination
      v-if="pagination"
      :total="pagination.total || 0"
      :current="pagination.current || 1"
      :pageSize="pagination.pageSize || 10"
      :showQuickJumper="true"
      :showSizeChanger="true"
      @change="(page, pageSize) => handleTableChange({ current: page, pageSize })"
    />
  </div>
</template>

<script lang="ts" setup>
import type { TablePaginationConfig, TableColumnsType } from 'ant-design-vue'
import type { Key } from 'ant-design-vue/es/table/interface'
import type { File as FileData } from '@/types/api/file'
import Pagination from '@/components/common/Pagination.vue'

defineOptions({
  name: 'FileTable'
})

// Props定义
withDefaults(defineProps<{
  loading?: boolean
  data: FileData[]
  columns: TableColumnsType<FileData>
  pagination?: TablePaginationConfig
  selectedRowKeys: string[]
  isImageFile: (file: FileData) => boolean
  isDocumentFile: (file: FileData) => boolean
  isVideoFile: (file: FileData) => boolean
  isAudioFile: (file: FileData) => boolean
  isPreviewable: (file: FileData) => boolean
  formatFileSize: (size: number) => string
  formatDate: (date: string) => string
}>(), {
  loading: false,
  data: () => [],
  pagination: () => ({}),
  selectedRowKeys: () => []
})

// Emits定义
const emit = defineEmits<{
  (e: 'delete', record: FileData): void
  (e: 'copy-link', record: FileData): void
  (e: 'download', record: FileData): void
  (e: 'preview', record: FileData): void
  (e: 'table-change', pagination: TablePaginationConfig): void
  (e: 'selection-change', keys: string[]): void
}>()

// 国际化
const { t } = useI18n()

// 行选择变更
const onSelectChange = (keys: Key[]) => {
  emit('selection-change', keys.map(key => String(key)))
}

// 表格变更（分页、排序、筛选）
const handleTableChange = (pagination: TablePaginationConfig) => {
  emit('table-change', pagination)
}
</script>

<style lang="scss" scoped>
.common-table-component {
  .file-name-cell {
    display: flex;
    align-items: center;
    
    .file-icon {
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: $spacing-md;
      
      .file-thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: $border-radius-base;
      }
      
      .anticon {
        font-size: 24px;
      }
    }
    
    .file-info {
      flex: 1;
      min-width: 0;
      
      .file-title {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      
      .file-meta {
        font-size: $font-size-sm;
        color: $text-color-secondary;
      }
    }
  }
  
  .image-icon {
    color: #13c2c2;
  }
  
  .doc-icon {
    color: #2b579a;
  }
  
  .video-icon {
    color: #ff6d70;
  }
  
  .audio-icon {
    color: #5cdbd3;
  }
  
  .other-icon {
    color: #8c8c8c;
  }
  
  :deep(.ant-btn) {
    height: auto;
    padding: 4px 8px;
  }
}
</style>